<!--
 * @Author: 1243sd 782012816@qq.com
 * @Date: 2024-03-13 22:41:14
 * @LastEditors: 1243sd 782012816@qq.com
 * @LastEditTime: 2024-06-26 23:46:19
 * @FilePath: \frontend-ykt-admin\src\views\user\list.vue
-->
<!---- 用户列表 ---->
<template>
    <div class="container">
        <b-card-new>
            <b-query-form-new ref="bForm" :data="formData" :form="dataForm.query" @search="handleSearch"></b-query-form-new>
            <b-query-table ref="bTable" :init-columns="initColumns()" :data-form="dataForm" :handleList="handleList"></b-query-table>
        </b-card-new>
        
        <!-- 用户弹窗 -->
        <el-dialog :title="userPopup.title" lock-scroll width="520px" :visible.sync="userPOpup">
            <el-form ref="userForm" label-width="90px" :model="userForm" :rules="rules">
                
                <el-form-item label="登录账号:" prop="username">
                    <el-input v-model="userForm.username" placeholder="请输入用户名称" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="登录密码:" prop="password">
                    <el-input v-model="userForm.password" placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="账户状态:" prop="status">
                    <el-radio-group v-model="userForm.status">
                            <el-radio :label="0">否</el-radio>
                            <el-radio :label="1">是</el-radio>
                        </el-radio-group>
                </el-form-item>
                <el-form-item label="用户类型:" prop="user_type" class="mb0">
                    <el-select v-model="userForm.user_type" placeholder="请选择">
                        <el-option
                            v-for="item in userTypeList"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                        </el-option>
                    </el-select>
                    
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <b-button-new text="取消" @click="userPopup.isShow = false"></b-button-new>
                <b-button-new text="保存" @click="handleConfirm(userPopup.type)">确 定</b-button-new>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import mixinPageHeight from "@/mixinPageHeight"
import isPlatformTenant from "@/utils/isPlatformTenant"

export default {
    mixins:[mixinPageHeight, isPlatformTenant],
    data() {
        return {
            formData:[
                { typeCode: "input", title: "搜索内容", name: "search" },
                { 
                    typeCode: "select", title: "排序方式", name: "order", 
                     optionData: [
                        { key: 'asc', value: '升序' },
                        { key: 'desc', value: '降序' },
                    ] 
            },
            ],
            dataForm:{
                url:"api/user/list",
                query:{
                    search: "", // 搜索内容
                    order: "", // 排序方式（asc,desc）
                }
            },
            handleList: [
                {
                    name: '新增用户',
                    btnCode: '',
                    btnClick: () => this.handleAddOrUpdate({}, 0)
                }
            ],
            // 用户弹窗
            userPOpup:false,
            userForm: {
                username: '', // 用户名
                password: '', // 登录密码
                status: '', // 用户状态
                user_type: '', // 用户类型（后台调用(1.平台2.站长,3,商家)）
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }],
                password: [{ required: true, message: '请输入登录密码', trigger: ['blur', 'change'] }],
                status: [{ required: true, message: '请选择用户状态', trigger: ['blur', 'change'] }],
                user_type: [{ required: true, message: '请选择用户类型', trigger: ['blur', 'change'] }],
            },
            userTypeList:[
                { key: '1', value: '平台' },
                { key: '2', value: '站长' },
                { key: '3', value: '商家' },
                { key: '4', value: '用户' }
            ]
        }
    },
    created() {
    },
    methods:{
       
        // 新增/编辑用户
        handleAddOrUpdate(row, type) {
            if (!this.isPlatformTenant) { // 非平台角色  直接获取当前租户的角色列表
                // 角色列表
                this.$api.role.role_list({ page: 1, page_size: 100 }).then(res => {
                    this.roleList = res.page_list || []
                    this.formData[3].optionData = res.page_list || []
                })
            }
            let info = JSON.parse(JSON.stringify(row))
            info.proxied_user_id = info.proxied_user_id || ''
            info.role_name = info.roles? JSON.parse(JSON.stringify(info.roles[0].name)) : ''
            // this.userPopup.type = type
            // this.userPopup.data = type? info : userInitPara()
            // this.userPopup.title = ['新增用户', '编辑用户'][type]
            // this.userPopup.isShow = true
        },
        // 弹窗确定
        handleConfirm(type) {
            if (this.isPlatformTenant && this.userPopup.data.tenant_id === '') {
                return this.$message.error('请选择租户')
            }
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                    if (this.userPopup.data.role_name == 'proxy_admin' && !this.userPopup.data.proxied_user_id) {
                        return this.$message.error('请选择代理会员')
                    }
                    if (!type && !this.userPopup.data.password) {
                        return this.$message.error('请输入登录密码')
                    }
                    if (!type) { // 新增
                        this.$api.user.user_add(this.userPopup.data).then(res => {
                            this.$message.success('新增成功')
                            this.handleRefresh()
                            this.userPopup.isShow = false
                        })
                    } else {
                        this.$api.user.user_edit(this.userPopup.data.id, this.userPopup.data).then(res => {
                            this.$message.success('编辑成功')
                            this.handleRefresh()
                            this.userPopup.isShow = false
                        })
                    }
                }
            })
        },
        handleLinkTo(row) {
            this.$router.push({
                path:"/business/thirdparty/detail",
                query:{
                    id:row.thirdPartyServeId
                }
            })
        },
        // 1启/0禁用
        handleEnable(id, type) {
            if (type) {
                this.$api.user.user_enable(id).then(res => {
                    this.$message.success('操作成功')
                    this.handleRefresh()
                })
            } else {
                this.$api.user.user_disable(id).then(res => {
                    this.$message.success('操作成功')
                    this.handleRefresh()
                })
            }
        },
        // 表格初始化
        initColumns() {
            let tableItem = [
                { title:"序号", valueName:"rn" },
                { title:"用户昵称", valueName:"nickname" },
                { title:"用户名", valueName:"username" },
                { title:"状态", valueName:"status", customRander: row => ['启用', '禁用'][row.status] },
                { title:"修改时间", valueName:"update_at" },
                { title:"创建时间", valueName:"created_at" },
                { title:"操作", fixed: 'right', width:120, customRander: (row) => (
                    <BTableOperation list={
                        [
                            { name: '编辑', btnCode: '4', btnClick: () => this.handleAddOrUpdate(row, 1)},
                            { name: '删除', btnCode: '4', btnClick: () => this.handleAddOrUpdate(row, 1)},
                        ]
                        }></BTableOperation>
                    ),
                }
            ]
            if (this.isPlatformTenant) {
                tableItem.unshift({ title: '租户名称', valueName: 'tenant_name' })
            }
            return tableItem
        }
    }
}
</script>